Ext.onReady(function(){													
	new Ext.Panel({
	    id:'contentPanel',
	    baseCls:'x-plain',
	    renderTo: 'content',
	    layout:'table',
	    autoScroll: true,
	    layoutConfig: {columns:2},						
	    // applied to child components
	    //defaults: {frame:true, width:200, height: 200},
	    items:[{
	        title:'Form',
			width: 450,
			height: 410,
			contentEl: 'contentForm',
			autoScroll: true,
			style:{
				padding: '5px'
			}
	    },{
	        title:'List Tabel',
			height: 410,
			width: 900,
			contentEl: 'contentGrid',
			autoScroll: true,
			style:{				
				padding: '5px'
			}
        }]
    });

				
	var mainPanel= new Ext.Window({
	    title: 'Window',
		region: 'center',
	    closable: false,
		//autoHeight: false,
		//autoWidth: true,
		hidden: false,
	    //height:450,
	    //width: 500,
	    //bodyStyle: 'padding:10px',
	    contentEl: 'content',
	    autoScroll: true,
		resizable: false,
		draggable: false,		
        tbar: new Ext.Toolbar({
            enableOverflow: true,
            items: [{
	            xtype:'splitbutton',
	            text: 'Tabel',
	            icon: '../images/menu.gif',  // <-- icon
	            cls: 'x-btn-text-icon',	            
	            //iconCls: 'add16',
                //handler: handleAction.createCallback('Menu Button'),
                menu: [{
					text: 'Tabel Users',
					icon: '../images/tabel.gif',  // <-- icon
		            cls: 'x-btn-text-icon',
					handler: function(){
						window.location="/rciapp/user/Users.action";														
					}
				},{
					text:'Tabel Dosen',
					icon: '../images/tabel.gif',  // <-- icon
		            cls: 'x-btn-text-icon'
				}]
            },'-',{
	            xtype:'splitbutton',
	            text: 'Customize',
	            icon: '../images/menu.gif',  // <-- icon
	            cls: 'x-btn-text-icon',
                //handler: handleAction.createCallback('Cut'),
                menu: [{text: 'Customize 1'}]
            },'->',{
                text: 'Logout',
                icon: '../images/logout.gif',  // <-- icon
	            cls: 'x-btn-text-icon'
            }]
        }),
        bbar: new Ext.ux.StatusBar({
        	id: 'form-statusbar',
            defaultText: 'Ready',
            plugins: new Ext.ux.ValidationStatus({form:'formUser'})
        })
	});
										
	// NOTE: This is an example showing simple state management. During development,
	// it is generally best to disable state management as dynamically-generated ids
	// can change across page loads, leading to unpredictable results.  The developer
	// should ensure that stable state ids are set for stateful components in real apps.        
	new Ext.Viewport({
	    layout: 'border',
	    items: [												
	    // create instance immediately
	    new Ext.BoxComponent({
	        region: 'north',
	        height: 80, // give north and south regions a height
	        autoEl: {
	            tag: 'div',
	            html:'<br><br>&nbsp;<font color:#fff>For Development only <span onmouseout="style.border=dotted 0px #96b181" onmouseover="style.border=dotted 1px #96b181" style="border: 0px dotted rgb(150, 177, 129);"><A href="http://localhost:8888/rciapp/doc/DoxExtJs.action" title="PHP AdminPanel">Documentation ExtJs</A></span></font>'
	        }
	    }), mainPanel
		]
	});
});